<template>
  <a-modal
    title="灌装单工单关联明细列表"
    :visible="show"
    @ok="handleOk"
    @cancel="handleCancel"
    width="80%"
    class="procedure-modal"
  >
    <template slot="footer">
      <a-button key="submit" type="primary" @click="handleOk"> 返回 </a-button>
    </template>
    <div class="searchrow">
      <a-button class="default-button" @click="AddPPRelationFun"
        >添加订单</a-button
      >
    </div>
    <div style="height: 400px">
      <a-table
        :columns="workUnitColums"
        :row-key="(record) => record.id"
        :data-source="bindorderList"
        :loading="loading"
        size="middle"
      >
        <template slot="action" slot-scope="text, record">
          <div style="display: flex; justify-content: space-around">
            <a-button class="default-button" @click="BindPPFun(record)"
              >删除</a-button
            >
          </div>
        </template>
      </a-table>
    </div>

    <!--订单选择-->
    <a-modal
      title="订单选择"
      :visible="AddPPRelationshow"
      @ok="AddPPRelationOk"
      :confirm-loading="AddPPRelationconfirmLoading"
      @cancel="AddPPRelationshow = false"
      width="80%"
      class="procedure-modal"
    >
      <div class="operation-search">
        <a-form layout="inline">
          <a-form-item label="制单日期：">
            <a-range-picker
              format="YYYY-MM-DD"
              :default-value="defaulttimeList"
              @change="onTime"
              v-model="defaulttimeList"
            >
              <template slot="dateRender" slot-scope="current">
                <div
                  class="ant-calendar-date"
                  :style="getcurrentStyle(current)"
                >
                  {{ current.date() }}
                </div>
              </template>
            </a-range-picker>
          </a-form-item>
          <a-form-item label="订单状态：">
            <a-select
              :allowClear="true"
              mode="multiple"
              :maxTagCount="1"
              class="selectwidth"
              v-model:value="searchItem.State"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in DicStatus"
                :key="item.type"
                :value="item.type"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="订单号：">
            <a-input
              :allowClear="true"
              placeholder="请输入"
              v-model="searchItem.PackingPlanNo"
            />
          </a-form-item>
          <a-form-item label="物料编码：">
            <a-input
              :allowClear="true"
              placeholder="请输入"
              v-model="searchItem.MaterialCode"
            />
          </a-form-item>
          <a-form-item label="物料名称：">
            <a-input
              :allowClear="true"
              placeholder="请输入"
              v-model="searchItem.MaterialName"
            />
          </a-form-item>
          <a-form-item>
            <a-button class="default-button" @click="GetPackingPlansListFun">
              查询
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div style="height: 400px">
        <a-table
          :columns="orderColums"
          :row-selection="{
            selectedRowKeys: expandedRowKeys,
            selectedRows: expandedRow,
            onChange: onSelectChange,
          }"
          :data-source="orderList"
          :loading="loading1"
          :pagination="false"
          :scroll="{ x: 700, y: 350 }"
          size="middle"
        >
        </a-table>
      </div>
      <a-pagination
        show-size-changer
        :default-current="1"
        :pageSizeOptions="pageSizeOptions"
        :total="orderListTotal"
        :pageSize="searchItem.pageRequestModel.pageSize"
        @change="procedureChange"
        @showSizeChange="onShowSizeChange"
      />
    </a-modal>
  </a-modal>
</template>

<script>
import {
  BindPackingPlanRelation,
  GetWebPackingPagePlans,
  UnBindPackingPlanRelation,
} from "@/api/PackingPlanMange/index";
import { debounce } from "@/common/debounce";
const workUnitColums = [
  {
    title: "序号",
    dataIndex: "num",
    align: "center",
    fixed: "left",
    width: 50,
  },
  {
    title: "订单号",
    dataIndex: "PackingPlanNo",
    sorter: true,
    width: 150,
    align: "center",
    fixed: "left",
  },
  {
    title: "产品编码",
    dataIndex: "MaterialCode",
    align: "center",
    ellipsis: true,
    width: 150,
    fixed: "left",
  },
  {
    title: "产品名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 150,
  },
  {
    title: "数量",
    dataIndex: "PlannedQuantity",
    align: "center",
  },
  {
    title: "订单类型",
    dataIndex: "OrderTypeDes",
    align: "center",
  },
  {
    title: "订单状态",
    dataIndex: "StateDesc",
    align: "center",
  },
  {
    title: "制单日期",
    dataIndex: "CreateDt",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: 200,
    align: "center",
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];
const orderColums = [
  {
    title: "序号",
    dataIndex: "num",
    fixed: "left",
    width: 50,
    align: "center",
  },
  {
    title: "订单号",
    dataIndex: "PackingPlanNo",
    sorter: true,
    fixed: "left",
    width: 150,
    align: "center",
  },
  {
    title: "产品名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 330,
  },
  {
    title: "订单状态",
    dataIndex: "StateDesc",
    align: "center",
  },
];
export default {
  props: ["show", "bindorderList", "selPackingPlan"],
  data() {
    return {
      workUnitColums,
      orderColums,
      expandedRowKeys: [],
      expandedRow: [],
      loading: false,
      loading1: false,
      confirmLoading: false,
      AddPPRelationshow: false,
      AddPPRelationconfirmLoading: false,
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        StartDt: null,
        EndDt: null,
        OrderType: [],
        WSType: [],
        State: [],
        SegmentID: null,
        MaterialCode: null,
        MaterialName: null,
        PackingPlanNo: null,
      },

      defaulttimeList: [], //默认时间
      DicStatus: [
        {
          type: 0,
          name: "初始",
        },
        {
          type: 2,
          name: "已下发",
        },
        {
          type: 3,
          name: "开始生产",
        },
        {
          type: 5,
          name: "结束生产",
        },
      ],
      orderList: [], //工单选择列表
      orderListTotal: 0,
      pageSizeOptions: ["30", "50", "100", "200", "500", "1000"], //分页
    };
  },
  methods: {
    //时间选择
    onTime(e, e1) {
      let that = this;
      that.searchItem.StartDt = that.dateExt.showDate(e[0]._d);
      that.searchItem.EndDt = that.dateExt.showDate(e[1]._d);
    },
    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    //关闭弹窗
    handleCancel() {
      this.$emit("update:show", false);
    },
    //确认添加/修改
    handleOk() {
      this.$emit("update:show", false);
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.expandedRowKeys = selectedRowKeys;
      this.expandedRow = selectedRows;
    },
    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.GetPackingPlansListFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.GetPackingPlansListFun();
    },
    //添加订单
    AddPPRelationFun() {
      let that = this;
      that.GetPackingPlansListFun();
      that.AddPPRelationshow = true;
    },
    async AddPPRelationOk() {
      let that = this;
      if (that.expandedRow.length <= 0) {
        that.$message.error("请选择绑定工单");
        return;
      }

      that.$confirm({
        title: "确认绑定选中工单？",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          that.AddPPRelationconfirmLoading = true;
          //工单ID

          let ids = [];
          that.expandedRow.map((item) => {
            ids.push(item.PackingPlanID);
          });
          let data = {
            packingPlanID: that.selPackingPlan.PackingPlanID,
            packingPlanListID: ids,
          };
          let res = await BindPackingPlanRelation(data);
          if (res.Status == 10000) {
            that.$message.success("绑定工单成功");

            let resdata = [...that.bindorderList, ...that.expandedRow];
            resdata.map((item, index) => {
              item.num = index + 1;
            });
            that.bindorderList = resdata;
          } else {
            that.$message.error(res.Message);
          }
          that.AddPPRelationconfirmLoading = false;
          that.AddPPRelationshow = false;
        },
        onCancel() {},
      });
    },
    //获取单据列表
    GetPackingPlansListFun: debounce(async function () {
      let that = this;
      that.loading1 = true;
      that.expandedRowKeys = [];
      that.expandedRow = [];
      //排除当前工单，绑定工单
      let ids = [that.selPackingPlan.PackingPlanID];
      that.bindorderList.map((item) => {
        ids.push(item.PackingPlanID);
      });
      that.searchItem.packingPlanListID = ids;
      //灌装只能选包装，包装只能选灌装
      let wst = that.selPackingPlan.OrderType == 10 ? 11 : 10;
      that.searchItem.OrderType = [wst];
      let res = await GetWebPackingPagePlans(that.searchItem);
      if (res.Status == 10000) {
        res.Data.Data.map((item, index) => {
          item.num = index + 1;
        });
        that.orderList = res.Data.Data;
        that.orderListTotal = res.Data.TotalNumber;
      } else {
        that.$message.error(res.Message);
      }
      that.loading1 = false;
    }),
    //删除绑定
    BindPPFun(row) {
      let that = this;
      that.$confirm({
        title: "确认解除选中绑定工单？",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          that.loading = true;
          let data = {
            packingPlanID: that.selPackingPlan.PackingPlanID,
            packingPlanListID: [row.PackingPlanID],
          };
          let res = await UnBindPackingPlanRelation(data);
          if (res.Status == 10000) {
            that.$message.success("解除绑定工单成功");
            let num = that.bindorderList.indexOf(row);
            that.bindorderList.splice(num, 1);
          } else {
            that.$message.error(res.Message);
          }
          that.loading = false;
        },
        onCancel() {},
      });
    },
  },
  created() {
    let that = this;
    that.searchItem.StartDt = that.dateExt.getDay(-30);
    that.defaulttimeList[0] = that.searchItem.StartDt;
    that.searchItem.EndDt = that.dateExt.getDay(0);
    that.defaulttimeList[1] = that.searchItem.EndDt;
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    height: 1000px;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .searchrow {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
  }
  .operation-search {
    display: flex;
    //justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    //margin-bottom: 0.9375rem;
    .selectwidth {
      width: 15rem;
    }
    .selectrightwidth {
      width: 7rem;
    }
  }
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
</style>
